<template>
  <el-dialog :title="title" v-model="visible" class="dialog-sm" append-to-body @close="visible = false">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" v-loading="loading">
      <el-form-item label="字典类型">
        <el-input v-model="form.type" :readonly="true" />
      </el-form-item>
      <el-form-item label="数据标签" prop="label">
        <el-input v-model="form.label" placeholder="请输入数据标签" maxlength="128" />
      </el-form-item>
      <el-form-item label="数据键值" prop="value">
        <el-input v-model="form.value" placeholder="请输入数据键值" maxlength="128" />
      </el-form-item>
      <el-form-item label="回显样式" prop="list_class">
        <el-select v-model="form.list_class" clearable>
          <el-option
            v-for="item in listClassOptions"
            :key="item.value"
            :label="item.label + '(' + item.value + ')'"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="样式属性" prop="css_class">
        <el-input v-model="form.css_class" placeholder="请输入样式属性" maxlength="64" />
      </el-form-item>
      <el-form-item label="显示排序" prop="list_sort">
        <el-input-number v-model="form.list_sort" controls-position="right" :min="0" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否默认" prop="is_default">
        <el-radio-group v-model="form.is_default">
          <el-radio v-for="dict in sys_yes_no" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" maxlength="250" />
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button class="medium" type="primary" :loading="submitting" :disabled="loading" @click="handleSubmit"
        >确 定</el-button
      >
      <el-button class="medium" @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script setup name="DictDataForm">
  import { addDataApi, infoDataApi, editDataApi } from '@/api/system/dict/data'
  const props = defineProps({ row: Object, moduleName: String })
  const visible = defineModel()
  const { proxy } = getCurrentInstance()

  const data = reactive({
    title: '',
    loading: false,
    submitting: false,
    form: {
      type: '',
      label: '',
      value: '',
      list_sort: 10,
      status: '1',
      is_default: '0',
      css_class: '',
      list_class: '',
      remark: ''
    },
    rules: {
      label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
      value: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
      list_sort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }]
    },
    // 数据标签回显样式
    listClassOptions: [
      { value: 'default', label: '默认' },
      { value: 'primary', label: '主要' },
      { value: 'success', label: '成功' },
      { value: 'info', label: '信息' },
      { value: 'warning', label: '警告' },
      { value: 'danger', label: '危险' }
    ]
  })
  const { loading, submitting, title, form, rules, listClassOptions } = toRefs(data)
  const { sys_normal_disable, sys_yes_no } = proxy.useDict('sys_normal_disable', 'sys_yes_no')

  onMounted(async () => {
    loading.value = true
    form.value.id = props.row?.id || undefined
    if (form.value.id) {
      title.value = '编辑' + props.moduleName
      await getRowData()
    } else {
      title.value = '新增' + props.moduleName
      form.value.type = props.row?.type || ''
    }
    loading.value = false
  })

  // 获取数据
  async function getRowData() {
    try {
      const { info } = await infoDataApi(form.value.id)
      form.value = proxy.dataToForm(form.value, info)
    } catch (error) {
      visible.value = false
    }
  }

  // 提交保存
  const formRef = useTemplateRef('formRef')
  const emit = defineEmits(['submit'])
  async function handleSubmit() {
    try {
      const valid = await formRef.value.validate()
      if (!valid) return
    } catch (error) {
      return
    }
    if (submitting.value) return
    submitting.value = true
    try {
      await proxy.$modal.confirm('确定提交表单数据？')
      if (form.value.id) {
        await editDataApi(form.value)
      } else {
        await addDataApi(form.value)
      }
      emit('submit')
      proxy.$modal.msgSuccess('操作成功')
      visible.value = false
    } catch (e) {
      submitting.value = false
    }
  }
</script>
